"use client";
import ContentView from "@/components/ContentView/page";
import React, { useEffect, useRef, useState } from "react";
import { useSearchParams } from "next/navigation";
import {
  commentPost,
  delPostComment,
  getPostById,
  getPostComment,
  replyPost,
} from "@/api";
import { message } from "antd";
import ReactQuill from "react-quill";
export interface IPostData {
  id: number;
  postType: string;
  postPhoto: string;
  postSummary: string;
  postAuthorName: string;
  postContent: string;
  createTime: string;
  postTitle: string;
  updateTime: string;
  userHead: string;
  isAuthor: number | string;
}
interface IPostContentView {}
interface IReplyOption {
  rootId?: number;
  rvId?: number;
  postId?: number;
}
const PostContentView: React.FC<IPostContentView> = () => {
  const searchParams = useSearchParams();
  const [review, setReview] = useState("");
  const textareaRef = useRef<ReactQuill>(null);
  const textRef = useRef<ReactQuill>(null);
  const [data, setData] = useState<IPostData>();
  const [reviewList, setReviewList] = useState<[]>([]);
  const [replyOption, setReplyOption] = useState<IReplyOption>({});
  const getPostMsg = async () => {
    const res = await getPostById({ id: searchParams.get("postId") });
    setData({
      ...res.data.data.post,
      userHead: res.data.data.user.userHead,
      isAuthor: res.data.data.user.id,
    });
  };
  const getPostReview = async () => {
    const res = await getPostComment({
      postId: searchParams.get("postId"),
      category: 0,
    });
    setReviewList(res.data.data);
  };
  //回复请求
  const replyComment = async () => {
    const res = await replyPost({
      content: review,
      postId: replyOption.postId,
      rootId: replyOption.rootId,
      replyUserId: replyOption.rvId,
      category: 0,
    });
    if (res.data.code === 200) {
      setReview("");
      setReplyOption({});
      getPostReview();
      message.success("回复成功");
    } else {
      message.error(res.data.msg);
    }
  };
  //发布评论
  const handlePublish = async () => {
    if (replyOption.rootId) {
      replyComment();
    } else {
      const res = await commentPost({
        content: review,
        postId: searchParams.get("postId")?.toString(),
        category: 0,
      });
      if (res.data.code === 200) {
        setReview("");
        getPostReview();
        message.success("评论成功");
      } else {
        message.error(res.data.msg);
      }
    }
  };

  const scrollToEditor = () => {
    if (textareaRef.current) {
      // 获取编辑器容器元素
      const editorElement = textareaRef.current.getEditor();
      editorElement.root.scrollIntoView({
        behavior: "smooth",
        block: "nearest",
      });
      // 如果编辑器没有焦点，先设置焦点
      if (!editorElement.hasFocus()) {
        editorElement.focus();
      }

      // 可选：将光标移动到末尾
      const length = editorElement.getLength();
      editorElement.setSelection(length, 0);
    }
  };
  const handleReply = (rootId: number, rvId: number, postId: number) => {
    setReplyOption({ rootId, rvId, postId });
    scrollToEditor();
    // textareaRef.current.focus();
    // textRef.current.scrollIntoView({ behavior: "smooth" });
  };
  const handleDel = async (commentId: number) => {
    const res = await delPostComment({ commentId });
    if (res.data.code === 200) {
      getPostReview();
      message.success("删除成功");
    } else {
      message.error(res.data.data.msg);
    }
  };
  useEffect(() => {
    getPostMsg();
    getPostReview();
  }, []);

  return (
    <div>
      <ContentView
        textRef={textRef}
        data={data}
        reviewList={reviewList}
        review={review}
        setReview={setReview}
        onPublish={handlePublish}
        handleReply={handleReply}
        textareaRef={textareaRef}
        handleDel={handleDel}
      ></ContentView>
    </div>
  );
};
export default PostContentView;
